import { Form, Input, Selector, TextArea, Card } from '@/components/base';
import { Typography } from "@/components/typography";
import { Flex } from "@/components/flex";
import * as hooks from '../hooks';

const { Text } = Typography;

export function BasicInfoForm() {

    const { isEdit } = hooks.useSearch();

    return (
        <Card>
            <Text size={16} strong style={{ display: 'block', marginBottom: '16px' }}>
                基本信息
            </Text>

            <Flex vertical gap={16}>
                <Form.Item
                    label="产品编号"
                    name="code"
                    style={{ width: '100%', padding: 0 }}
                    rules={[{ required: true, message: '请输入产品编号' }]}
                >
                    <Input placeholder="请输入产品编号" disabled={isEdit} />
                </Form.Item>

                <Form.Item
                    label="产品名称"
                    name="name"
                    style={{ width: '100%', padding: 0 }}
                    rules={[{ required: true, message: '请输入产品名称' }]}
                >
                    <Input placeholder="请输入产品名称" disabled={isEdit} />
                </Form.Item>

                <Form.Item
                    label="产品分类"
                    name="category"
                    style={{ width: '100%', padding: 0 }}
                    getValueFromEvent={e => e[0]}
                    getValueProps={e => ({ value: [e] })}
                >
                    <Selector options={categoryOptions} />
                </Form.Item>

                <Form.Item
                    label="品牌"
                    name="brand"
                    style={{ width: '100%', padding: 0 }}
                >
                    <Input placeholder="请输入品牌" />
                </Form.Item>

                <Form.Item
                    label="规格"
                    name="specification"
                    style={{ width: '100%', padding: 0 }}
                >
                    <Input placeholder="请输入规格" />
                </Form.Item>

                <Form.Item
                    label="单位"
                    name="unit"
                    style={{ width: '100%', padding: 0 }}
                    rules={[{ required: true, message: '请选择单位' }]}
                    getValueFromEvent={e => e[0]}
                    getValueProps={e => ({ value: [e] })}
                >
                    <Selector options={unitOptions} />
                </Form.Item>

                <Form.Item
                    label="产品描述"
                    name="description"
                    style={{ width: '100%', padding: 0 }}
                >
                    <TextArea 
                        placeholder="请输入产品描述" 
                        rows={4}
                        maxLength={500}
                        showCount
                    />
                </Form.Item>

                {/* <Form.Item
                    label="产品标签"
                    name="tags"
                    style={{ width: '100%', padding: 0 }}
                >
                    <Input placeholder="请输入产品标签，多个标签用逗号分隔" />
                </Form.Item> */}

                <Form.Item
                    label="状态"
                    name="status"
                    style={{ width: '100%', padding: 0 }}
                    rules={[{ required: true, message: '请选择状态' }]}
                    getValueFromEvent={e => e[0]}
                    getValueProps={e => ({ value: [e] })}
                >
                    <Selector options={statusOptions} />
                </Form.Item>
            </Flex>
        </Card>
    );
} 

const categoryOptions = [
    { label: '电子产品', value: '电子产品' },
    { label: '服装', value: '服装' },
    { label: '食品', value: '食品' },
    { label: '图书', value: '图书' },
    { label: '家居', value: '家居' },
    { label: '运动', value: '运动' },
    { label: '美妆', value: '美妆' },
    { label: '其他', value: '其他' }
];

const unitOptions = [
    { label: '个', value: '个' },
    { label: '件', value: '件' },
    { label: '盒', value: '盒' },
    { label: '包', value: '包' },
    { label: '瓶', value: '瓶' },
    { label: '袋', value: '袋' },
    { label: '套', value: '套' },
    { label: '公斤', value: '公斤' },
    { label: '克', value: '克' },
    { label: '升', value: '升' },
    { label: '毫升', value: '毫升' },
    { label: '米', value: '米' },
    { label: '厘米', value: '厘米' }
];

const statusOptions = [
    { label: '上架', value: 'active' },
    { label: '下架', value: 'inactive' },
    { label: '草稿', value: 'draft' }
];